<template>
	<view class="myfruit">
		<view class="list_s" v-for="(item, index) in dataList" :key="index">
			<image :src="item.img" mode=""></image>
			<view class="goods_right">
				<p class="p1">{{item.title}}</p>
				<p class="p3">
					<text class="text2">数量：</text>
					<text class="text1">{{item.num}}</text>
				</p>
				<view class="bottom_btn">
					<p class="p5" :style="{background: newColor.color}" @tap="jumpNext(item)">立即兑换</p>
					<p class="p6" @tap="duihuan(item)">兑换积分</p>
				</view>
			</view>
		</view>
		<nodata v-if="dataList.length == 0"></nodata>
	</view>
</template>
<script>
	import nodata from '@/components/nodata/nodata.vue'
	export default {
		data(){
			return{
				goodList:{
					title:'新鲜水果',
					price: 20,
				},
				dataList:[],
				plantGold:''
			}
		},
		onShow() {
			this.getMyfruit()
			this.getGameConfig()
		},
		methods:{
			jumpNext(item){
				this.$Router.push({
					path:'/pagesA/pages/orchard/order/goodsDetail',query:{
						goodid: item.goods_id,
						propId: item.prop_id
					}
				})
			},
			duihuan(item){
				let that = this
				uni.showModal({
					title:'兑换提示',
					content:'确认要兑换成'+that.plantGold+'积分吗?',
					confirmText:'兑换',
					confirmColor:that.newColor.color,
					success: (res) => {
						if(res.confirm){
							that.request('Prop/getGold',{
								prop_id: item.prop_id
							}).then(res=>{
								console.log(res);
								if(res.code == 200){
									uni.showToast({
										title:'兑换成功'
									})
									that.getMyfruit()
								}
							})
						}
					}
				})
			},
			getMyfruit(){//获取我的水果
				this.request('Prop/getReapNum',{})
				.then(res=>{
					this.dataList = res.data
					console.log(this.dataList);
				})
			},
			getGameConfig(){
				this.request('Game/getGameConfig',{})
				.then(res=>{
					console.log(res);
					this.plantGold = res.data.plant_gold
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myfruit{
		.list_s {
			box-sizing: border-box;
			background-color: #ffffff;
			// overflow: hidden;
			// height: 200rpx;
			margin: 0 20upx;
			margin-top: 20upx;
			margin-bottom: 20upx;
			box-shadow: 0px 0px 21upx 0px rgba(255, 74, 44, 0.1);
			padding: 28upx;
			border-radius: 10upx;
			position: relative;
			image {
				width: 160upx;
				height: 160upx;
				float: left;
				border-radius: 15upx;
				margin-right: 20upx;
			}
			.goods_right {
				position: relative;
				overflow: hidden;
			}
			.p1 {
				font-size: 32upx;
				color: #000000;
				overflow: hidden;
				height: 40upx;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			.p2 {
				font-size: 24upx;
				line-height: 26upx;
				margin-top: 10upx;
				color: #333333;
				margin-bottom: 10upx;
				overflow: hidden;
				.text1 {
					color: #646464;
				}
				.text2 {
					color: #f23a3a;
				}
			}
			.p3 {
				margin-top: 70upx;
				overflow: hidden;
				.text1 {
					font-size: 36upx;
					color: #f23a3a;
					margin-right: 20upx;
				}
				.text2 {
					font-size: 28upx;
					font-family: Droid Sans Fallback;
					font-weight: 400;
					color: rgba(100, 100, 100, 1);
				}
			}
			.bottom_btn{
				margin-top: 20upx;
				position: absolute;
				top: 0;
				right: 0;
				.p5,.p6{
					height: 40upx;
					background-color: #FE6C14;
					padding: 5upx 15upx;
					border-radius: 30upx;
					font-size: 24upx;
					line-height: 40upx;
					text-align: center;
					color: #FFFFFF;
					margin-bottom: 30upx;
				}
			}
		}
	}
</style>
